<!-- 图片裁剪弹窗组件 license by http://eleadmin.com -->
<template>
  <el-dialog
    :visible="show"
    :title="title || t('ele.cropper.title')"
    :width="width"
    :show-close="showClose"
    :custom-class="customClass"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :destroy-on-close="destroyOnClose"
    :lock-scroll="lockScroll"
    :append-to-body="appendToBody"
    :modal-append-to-body="modalAppendToBody"
    :modal="modal"
    :top="top"
    @open="onOpen"
    @closed="onClosed"
    @update:visible="updateVisible"
  >
    <template slot="title">
      <slot name="title" />
    </template>
    <ele-cropper
      v-if="showCropper"
      :src="src"
      :aspect-ratio="aspectRatio"
      :view-mode="viewMode"
      :accept="accept"
      :drag-mode="dragMode"
      :initial-aspect-ratio="initialAspectRatio"
      :min-container-width="minContainerWidth"
      :min-container-height="minContainerHeight"
      :min-canvas-width="minCanvasWidth"
      :min-canvas-height="minCanvasHeight"
      :min-crop-box-width="minCropBoxWidth"
      :min-crop-box-height="minCropBoxHeight"
      :cropped-width="croppedWidth"
      :cropped-height="croppedHeight"
      :cropped-min-width="croppedMinWidth"
      :cropped-min-height="croppedMinHeight"
      :cropped-max-width="croppedMaxWidth"
      :cropped-max-height="croppedMaxHeight"
      :cropped-fill-color="croppedFillColor"
      :to-blob="toBlob"
      :image-smoothing-enabled="imageSmoothingEnabled"
      :image-smoothing-quality="imageSmoothingQuality"
      :tools="tools"
      :show-preview="showPreview"
      :ok-text="okText"
      @crop="onCrop"
    />
    <template slot="footer">
      <slot />
    </template>
  </el-dialog>
</template>

<script>
  import Locale from 'element-ui/lib/mixins/locale';
  import EleCropper from '../../ele-cropper';

  export default {
    name: 'EleCropperDialog',
    mixins: [Locale],
    components: { EleCropper },
    emits: ['crop', 'open', 'closed', 'update:show'],
    props: {
      // 是否显示, 支持.sync修饰
      show: Boolean,
      // 裁剪的图片地址
      src: String,
      // 裁剪比例
      aspectRatio: {
        type: Number,
        default: 1
      },
      // 裁剪组件模式
      viewMode: Number,
      // 拖动模式
      dragMode: String,
      // 裁剪框的初始宽高比
      initialAspectRatio: Number,
      // 容器最小宽度
      minContainerWidth: Number,
      // 容器最小高度
      minContainerHeight: Number,
      // 画布最小宽度
      minCanvasWidth: Number,
      // 画布最小高度
      minCanvasHeight: Number,
      // 裁剪盒子最小宽度
      minCropBoxWidth: Number,
      // 裁剪盒子最小高度
      minCropBoxHeight: Number,
      // 裁剪输出宽度
      croppedWidth: Number,
      // 裁剪输出高度
      croppedHeight: Number,
      // 裁剪输出最小宽度
      croppedMinWidth: Number,
      // 裁剪输出最小高度
      croppedMinHeight: Number,
      // 裁剪输出最大宽度
      croppedMaxWidth: Number,
      // 裁剪输出最大高度
      croppedMaxHeight: Number,
      // 裁剪输出的填充色
      croppedFillColor: Number,
      //
      imageSmoothingEnabled: Boolean,
      // 裁剪输出的质量
      imageSmoothingQuality: String,
      // 是否返回blob数据
      toBlob: Boolean,
      // 允许上传的图片类型
      accept: String,
      // 操作按钮布局
      tools: String,
      // 是否显示预览组件
      showPreview: {
        type: Boolean,
        default: true
      },
      // 完成按钮文字
      okText: String,
      // 弹窗的标题
      title: String,
      // 弹窗的宽度
      width: {
        type: String,
        default: '680px'
      },
      // Dialog 的自定义类名
      customClass: String,
      // 是否可以通过点击 modal 关闭 Dialog
      closeOnClickModal: {
        type: Boolean,
        default: true
      },
      // 是否可以通过按下 ESC 关闭 Dialog
      closeOnPressEscape: {
        type: Boolean,
        default: true
      },
      // 是否显示关闭按钮
      showClose: {
        type: Boolean,
        default: true
      },
      // 是否在 Dialog 出现时将 body 滚动锁定
      lockScroll: {
        type: Boolean,
        default: true
      },
      // Dialog 自身是否插入至 body 元素上
      appendToBody: Boolean,
      // 遮罩层是否插入至 body 元素上
      modalAppendToBody: {
        type: Boolean,
        default: true
      },
      // 是否需要遮罩层
      modal: {
        type: Boolean,
        default: true
      },
      // Dialog CSS 中的 margin-top 值
      top: String,
      // 关闭时销毁 Dialog 中的元素
      destroyOnClose: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        showCropper: false
      };
    },
    methods: {
      /* 弹窗打开回调 */
      onOpen() {
        this.showCropper = true;
        this.$emit('open');
      },
      /* 弹窗关闭回调 */
      onClosed() {
        if (this.destroyOnClose) {
          this.showCropper = false;
        }
        this.$emit('closed');
      },
      /* 裁剪完成回调 */
      onCrop(result) {
        this.$emit('crop', result);
      },
      /* 更新show参数 */
      updateVisible(value) {
        this.$emit('update:show', value);
      }
    }
  };
</script>
